<apes-transfer-list class="apes-transfer-list" [ngStyle]="apesListStyle" data-direction="left"
                  [titleText]="apesTitles[0]"
                  [showSelectAll]="apesShowSelectAll"
                  [dataSource]="leftDataSource"
                  [filter]="leftFilter"
                  [filterOption]="apesFilterOption"
                  (filterChange)="handleFilterChange($event)"
                  [renderList]="apesRenderList[0]"
                  [render]="apesRender"
                  [disabled]="apesDisabled"
                  [showSearch]="apesShowSearch"
                  [searchPlaceholder]="apesSearchPlaceholder || locale.searchPlaceholder"
                  [notFoundContent]="apesNotFoundContent"
                  [itemUnit]="apesItemUnit || locale.itemUnit"
                  [itemsUnit]="apesItemsUnit || locale.itemsUnit"
                  [footer]="apesFooter"
                  (handleSelect)="handleLeftSelect($event)"
                  (handleSelectAll)="handleLeftSelectAll($event)">
</apes-transfer-list>
<div class="apes-transfer-operation">
  <button apes-button (click)="moveToLeft()" [disabled]="apesDisabled || !leftActive" [apesType]="'primary'" [apesSize]="'small'">
    <i apes-icon apesType="left"></i><span *ngIf="apesOperations[1]">{{ apesOperations[1] }}</span>
  </button>
  <button apes-button (click)="moveToRight()" [disabled]="apesDisabled || !rightActive" [apesType]="'primary'" [apesSize]="'small'">
    <i apes-icon apesType="right"></i><span *ngIf="apesOperations[0]">{{ apesOperations[0] }}</span>
  </button>
</div>
<apes-transfer-list class="apes-transfer-list" [ngStyle]="apesListStyle" data-direction="right"
                  [titleText]="apesTitles[1]"
                  [showSelectAll]="apesShowSelectAll"
                  [dataSource]="rightDataSource"
                  [filter]="rightFilter"
                  [filterOption]="apesFilterOption"
                  (filterChange)="handleFilterChange($event)"
                  [renderList]="apesRenderList[1]"
                  [render]="apesRender"
                  [disabled]="apesDisabled"
                  [showSearch]="apesShowSearch"
                  [searchPlaceholder]="apesSearchPlaceholder || locale.searchPlaceholder"
                  [notFoundContent]="apesNotFoundContent"
                  [itemUnit]="apesItemUnit || locale.itemUnit"
                  [itemsUnit]="apesItemsUnit || locale.itemsUnit"
                  [footer]="apesFooter"
                  (handleSelect)="handleRightSelect($event)"
                  (handleSelectAll)="handleRightSelectAll($event)">
</apes-transfer-list>
